<template>
    <div class="dashboard-container">
      <el-card class="box-card">
        <div class="header">
          <h3>消息中心</h3>
          <el-button class="action-button" type="primary" @click="fetchMessages">刷新消息</el-button>
        </div>
        <el-table :data="messages" style="width: 100%; margin-top: 20px;">
          <el-table-column prop="id" label="消息ID" width="100"></el-table-column>
          <el-table-column prop="title" label="标题"></el-table-column>
          <el-table-column prop="content" label="内容"></el-table-column>
          <el-table-column prop="status" label="状态" width="100">
            <template #default="{ row }">
              <el-tag :type="row.status === 'read' ? 'success' : 'info'">{{ row.status | statusFilter }}</el-tag>
            </template>
          </el-table-column>
          <el-table-column label="操作" width="200">
            <template #default="{ row }">
              <el-button link @click="toggleRead(row)" :loading="row.updating">
                {{ row.status === 'unread' ? '标记为已读' : '标记为未读' }}
              </el-button>
              <el-button link @click="deleteMessage(row.id)" :loading="row.deleting">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
        <el-pagination
          layout="prev, pager, next"
          :total="total"
          :page-size="pageSize"
          @current-change="handlePageChange"
          class="pagination"
        ></el-pagination>
      </el-card>
    </div>
  </template>
  
  <script setup>
  // ...引入statements...
  </script>
  
  <style scoped>
  .dashboard-container {
    padding: 20px;
    background-color: #f5f5f5;
  }
  
  .box-card {
    overflow: hidden;
  }
  
  .header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
  }
  
  h3 {
    margin: 0;
    font-size: 24px;
  }
  
  .action-button {
    margin-bottom: 20px;
  }
  
  .pagination {
    margin-top: 20px;
    text-align: right;
  }
  
  /* 其他样式可以根据需要添加 */
  </style>